<!--
 * @Author: gyc
 * @Date: 2020-06-18 16:33:54
 * @LastEditTime: 2020-07-25 10:49:41
 * @Description: Nuxt测试版
--> 
<template>
  <div class="ms-article">
    <!--<div id="content"></div>-->
    <div class="ql-editor" v-html="content"></div>
  </div>
</template>
<script>
const md = require("markdown-it")({
  html: true, // 在源码中启用 HTML 标签
  xhtmlOut: true, // 使用 '/' 来闭合单标签 （比如 <br />）。
  // 这个选项只对完全的 CommonMark 模式兼容。
  breaks: true, // 转换段落里的 '\n' 到 <br>。
  langPrefix: "language-", // 给围栏代码块的 CSS 语言前缀。对于额外的高亮代码非常有用。
  linkify: true, // 将类似 URL 的文本自动转换为链接。

  // 启用一些语言中立的替换 + 引号美化
  typographer: false,

  // 当 typographer 启用时，成倍的 + 单引号替换对。
  // 或者智能(smartquotes)引号等，可以是 String 或 Array。
  //
  // 比方说，你可以支持 '«»„“' 给俄罗斯人使用， '„“‚‘'  给德国人使用。
  // 还有 ['«\xA0', '\xA0»', '‹\xA0', '\xA0›'] 给法国人使用（包括 nbsp）。
  quotes: "“”‘’",

  // 高亮函数，会返回转义的 HTML。
  // 如果源字符串未更改，且应该进行外部的转义，或许返回 ''
  // 如果结果以 <pre ... 开头，内部包装器则会跳过。
  highlight: function (/*str, lang*/) {
    return "";
  },
}).use(require("markdown-it-mark"));

export default {
  name: "msArticle",
  layout: "ipage",
  data() {
    return {
      content: "",
    };
  },
  mounted() {
    console.log(this.$route.params);
    this.$axios
      .get("art/findArt", {
        params: {
          id: this.$route.params.id,
        },
      })
      .then((res) => {
        var result = md.render(res.data.data.articleData);
        console.log(res.data.data.articleData);
        // document.getElementById("content").innerHTML = result;
        this.content = res.data.data.articleData;
      });
  },
};
</script>

<style lang="scss" scoped>
.ms-article {
  display: flex;
  padding-top: 65px;
  justify-content: center;
}
#content {
  width: 800px;
}
.ql-editor{
  width: 800px;
  min-height: 100vh;
}
</style>